<!DOCTYPE html>
<html>
<head>
    <title>快速诊断</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .result { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
        .info { background-color: #d1ecf1; border-color: #bee5eb; color: #0c5460; }
        pre { background: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
        button { margin: 5px; padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
    </style>
</head>
<body>
    <h1>用户标签关联管理 - 快速诊断</h1>
    
    <button onclick="runAllTests()">运行所有诊断</button>
    <button onclick="clearResults()">清除结果</button>
    
    <div id="results"></div>

    <script>
        const baseURL = 'http://localhost:8080';
        
        function addResult(message, type = 'info', data = null) {
            const results = document.getElementById('results');
            const div = document.createElement('div');
            div.className = `result ${type}`;
            
            let content = `<strong>${new Date().toLocaleTimeString()}</strong>: ${message}`;
            if (data) {
                content += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            }
            
            div.innerHTML = content;
            results.appendChild(div);
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }

        async function testAPI(url, description) {
            try {
                addResult(`测试 ${description}...`, 'info');
                const response = await axios.get(url);
                addResult(`✓ ${description} 成功`, 'success', response.data);
                return true;
            } catch (error) {
                addResult(`✗ ${description} 失败: ${error.message}`, 'error', error.response?.data);
                return false;
            }
        }

        async function runAllTests() {
            clearResults();
            addResult('开始诊断...', 'info');
            
            // 1. 测试基础连接
            await testAPI(`${baseURL}/test/usertag/ping`, '基础连接');
            
            // 2. 测试服务注入
            await testAPI(`${baseURL}/test/usertag/services`, '服务注入');
            
            // 3. 测试用户数据
            await testAPI(`${baseURL}/test/usertag/test-users`, '用户数据');
            
            // 4. 测试标签数据
            await testAPI(`${baseURL}/test/usertag/test-tags`, '标签数据');
            
            // 5. 测试关联数据
            await testAPI(`${baseURL}/test/usertag/test-relations`, '关联数据');
            
            // 6. 测试主要API
            await testAPI(`${baseURL}/homepage/usertag/list`, '主要API - 列表');
            await testAPI(`${baseURL}/homepage/usertag/users`, '主要API - 用户列表');
            await testAPI(`${baseURL}/homepage/usertag/tags`, '主要API - 标签列表');
            
            addResult('诊断完成！', 'info');
        }

        // 页面加载后自动运行
        window.onload = function() {
            addResult('页面加载完成，点击"运行所有诊断"开始测试', 'info');
        };
    </script>
</body>
</html>
